#ifndef WOL_PAGE_H
#define WOL_PAGE_H

#include <Arduino.h>

const char wolPage[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
  <title>网络唤醒</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
  <style>
    .wol-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 1rem;
    }
    .history-item {
      cursor: pointer;
      padding: 0.5rem;
      margin: 0.25rem 0;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .history-item:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <div class="wol-container">
    <h1>网络唤醒</h1>
    <form id="wolForm">
      <label for="mac">MAC地址</label>
      <input type="text" 
             name="mac" 
             id="mac" 
             placeholder="00:11:22:33:44:55" 
             pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$"
             required>
      
      <label for="hostname">主机名</label>
      <input type="text"
             name="hostname"
             id="hostname"
             placeholder="我的电脑"
             maxlength="32"
             required>
      <button type="submit">发送唤醒包</button>
    </form>

    <h2>历史记录</h2>
    <button id="clearHistory" class="secondary">清除所有历史记录</button>
    <div id="history"></div>
  </div>

  <script>
    const form = document.getElementById('wolForm');
    const historyDiv = document.getElementById('history');

    // 获取历史记录
    async function loadHistory() {
      try {
        const response = await fetch('/wol/history');
        const history = await response.json();
        
        historyDiv.innerHTML = history.map(item => `
          <div class="history-item" data-mac="${item.mac}" data-hostname="${item.hostname || ''}">
            ${item.hostname || '未知设备'} (${item.mac})
          </div>
        `).join('');

        // 为每个历史记录项添加点击事件
        document.querySelectorAll('.history-item').forEach(item => {
          item.addEventListener('click', () => {
            document.getElementById('mac').value = item.dataset.mac;
            document.getElementById('hostname').value = item.dataset.hostname || '';
            form.dispatchEvent(new Event('submit'));
          });
        });
      } catch (error) {
        console.error('获取历史记录失败:', error);
      }
    }

    // 表单提交处理
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const mac = document.getElementById('mac').value;
      
      try {
        const response = await fetch('/wol', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `mac=${encodeURIComponent(mac)}&hostname=${encodeURIComponent(document.getElementById('hostname').value)}`
        });

        if (response.ok) {
          alert('唤醒包发送成功');
          loadHistory(); // 刷新历史记录
        } else {
          alert('唤醒包发送失败');
        }
      } catch (error) {
        alert('网络错误：' + error.message);
      }
    });

    // 清除历史记录
    document.getElementById('clearHistory').addEventListener('click', async () => {
      if (confirm('确定要删除所有历史记录吗？')) {
        try {
          const response = await fetch('/wol/history/clear', {
            method: 'POST'
          });
          
          if (response.ok) {
            alert('历史记录已清除');
            loadHistory();
          } else {
            alert('清除历史记录失败');
          }
        } catch (error) {
          alert('网络错误：' + error.message);
        }
      }
    });

    // 页面加载时获取历史记录
    loadHistory();
  </script>
</body>
</html>
)=====";

#endif
